<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广内殿管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script type="text/javascript" src="../js/layui/layui.js"></script>
<style type="text/css">
.layui-table-cell { /* 设置表格高度 */
	height: 60px;
	line-height: 60px;
}

.layui-table img { /*设置图片高度  */
	width: 50px;
	height: 50px;
}
</style>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>会员管理</cite></a>
			<a><cite>权限规则</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>

	<div style="display: none;" id="myDiv">
		<form class="layui-form" lay-filter="mF" id="myForm"
			onsubmit="return false;">
			<input type="text" name="id" style="display: none;" />
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 书名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 作者</label>
				<div class="layui-input-inline">
					<input type="text" name="author" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 出版社</label>
				<div class="layui-input-inline">
					<input type="text" name="press" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 国际标准书号</label>
				<div class="layui-input-inline">
					<input type="text" name="IBSN" class="layui-input"
						placeholder="num">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 版次</label>
				<div class="layui-input-inline">
					<input type="text" name="edition" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 商品编码</label>
				<div class="layui-input-inline">
					<input type="text" name="commodityCode" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 是否可用</label>
				<div class="layui-input-inline">
					<select name="canUse">
						<option value=""></option>
						<option value="已上架">上架</option>
						<option value="已下架">下架</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 库存</label>
				<div class="layui-input-inline">
					<input type="text" name="stock" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 品牌同出版社</label>
				<div class="layui-input-inline">
					<input type="text" name="brand" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 包装</label>
				<div class="layui-input-inline">
					<input type="text" name="packing" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 开本</label>
				<div class="layui-input-inline">
					<input type="text" name="format" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 上架时间</label>
				<div class="layui-input-inline">
					<input type="text" name="onSaleTime" id="shijian"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 用纸</label>
				<div class="layui-input-inline">
					<input type="text" name="paper" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 页数</label>
				<div class="layui-input-inline">
					<input type="text" name="pageNumber" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 字数</label>
				<div class="layui-input-inline">
					<input type="text" name="wordNumber" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 销售价</label>
				<div class="layui-input-inline">
					<input type="text" name="sellPrice" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 折扣价</label>
				<div class="layui-input-inline">
					<input type="text" name="discountPrice" placeholder="num"
						class="layui-input">
				</div>
			</div>
			<!--  <div class="layui-form-item">
             <label for="level-name" class="layui-form-label"> 所属分类</label>
             <div class="layui-input-inline">
                  <input type="text"name="categoryId" placeholder="num" class="layui-input">
             </div>
         </div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">所属分类</label>
				<div class="layui-input-inline">
					<select id="myType" name="categoryId">
						<option value=""></option>
						<option value="1">国学</option>
						<option value="2">史</option>
						<option value="3">经</option>
						<option value="4">诗</option>
						<option value="5">礼</option>
						<option value="6">乐</option>
						<option value="7">中国近代小说</option>
						<option value="8">科幻</option>
						<option value="9">外国小说</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 图片</label>
				<div id="div_upload_img">
					<input id="id" name="id" /> <input id="img" name="img" />
					<div>
						<img style="width: 180px; height: 180px;" id="uploadImg"
							name="img" />
					</div>
					<button type="button" class="layui-btn" id="Test_img">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				</div>
			</div>

			<div class="layui-form-item">
				<button class="layui-btn" id="bc" lay-filter="bc" lay-submit="">
					添加</button>
				<button type="submit" class="layui-btn" lay-submit=""
					id="updateProd" lay-filter="updateBooks">修改</button>
			</div>
		</form>
	</div>

	<div class="x-body">
		<form id="form_product" class="layui-form x-center"
			onsubmit="return false" style="width: 95%">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<div class="layui-input-inline" style="width: 120px">
						<select id="categoryId" name="categoryId">
							<option value="">请选择分类</option>
							<option value="1">国学</option>
							<option value="2">史</option>
							<option value="3">经</option>
							<option value="4">诗</option>
							<option value="5">礼</option>
							<option value="6">乐</option>
							<option value="7">中国近代小说</option>
							<option value="8">科幻</option>
							<option value="9">外国小说</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" id="name" name="name" placeholder="书名"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" id="beginPrice" name="beginPrice"
							placeholder="起始价格" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" id="endPrice" name="endPrice"
							placeholder="结束价格" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 120px">
						<select id="brand" name="brand">
							<option value="">请选择品牌</option>
							<option value="中华书局">中华书局</option>
							<option value="中华">中华</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 120px">
						<select id="canUse" name="canUse">
							<option value="">请选择状态</option>
							<option value="已上架">已上架</option>
							<option value="已下架">已下架</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" lay-submit="" lay-filter="chaXun">
							<i class="layui-icon">&#xe608;</i>查询
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="toolbarDemo">
 			<div class="layui-btn-container">
  		  		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  			</div>
		</script>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script>
		var table, layer, form, laydate, upload, $;
		layui
				.use(
						[ 'table', 'layer', 'laydate', 'form', 'upload' ],
						function() {
							table = layui.table;
							layer = layui.layer;
							form = layui.form;
							laydate = layui.laydate;
							upload = layui.upload;
							$ = layui.$;

							//执行一个laydate实例
							laydate.render({
								elem : '#shijian' //指定元素
							});
							//第一个实例
							table
									.render({
										elem : '#demo',
										url : '../selBook' //数据接口
										,
										toolbar : '#toolbarDemo',
										id : 'productTable',
										page : true //开启分页
										,
										cols : [ [ //表头
												{
													field : 'id',
													title : 'ID',

													sort : true
												},
												{
													field : 'name',
													title : '书名',

												},
												{
													field : 'img',
													title : '图片',

													templet : '<div><img src="../images/{{d.img}}" onclick="showImg(this)" id="{{d.id}}" title="{{d.img}}" /></div>'
												},
												{
													field : 'author',
													title : '作者',

												},
												{
													field : 'brand',
													title : '品牌',

												},
												{
													field : 'canUse',
													title : '状态',
													templet : function(res){
														if (res.canUse=="已上架") {
															return '<input pid="'+res.id+'" type="checkbox" checked lay-skin="switch" lay-filter="xia" lay-text="上架|下架">';
														} else {
															return '<input pid="'+res.id+'" type="checkbox" checked lay-skin="switch" lay-filter="shang" lay-text="下架|上架">';
														}
													}
														
												},
												{
													field : 'stock',
													title : '库存',

													sort : true
												},
												{
													field : 'onSaleTime',
													title : '上架时间',

													sort : true
												},
												{
													field : 'sellPrice',
													title : '售价',

													sort : true
												},
												{
													field : 'c_name',
													title : '分类名称',

													templet : function(obj) {
														return obj.category.c_name
													}
												}, {
													fixed : 'right',
													width : 200,
													align : 'center',
													toolbar : '#barDemo'
												} ] ]
									});

							form.on('submit(chaXun)', function(data) {
								table.reload("productTable", {
									where : { //设定异步数据接口的额外参数，任意设
										name : $("#name").val(),
										brand : $("#brand").val(),
										categoryId : $("#categoryId").val(),
										beginPrice : $("#beginPrice").val(),
										endPrice : $("#endPrice").val(),
										canUse : $("#canUse").val()
									},
									page : {
										curr : 1
									//重新从第 1 页开始
									}
								});
								return false;
							});

							//监听工具条 
							table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
								var data = obj.data; //获得当前行数据
								var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

								if (layEvent === 'detail') { //查看
									// 隐藏
									$("#bc").hide();
									$("#updateProd").hide();
									$("#id").hide();
									$("#img").hide();
									$("#Test_img").hide();
									// img设置值
									$("#uploadImg").attr("src",
											"../images/" + data.img);
									form.val("mF", data);
									layer.open({
										type : 1,
										content : $('#myDiv'),
										//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
										area : [ '700px', '550px' ]
									});
								} else if (layEvent === 'del') { //删除
									layer.confirm('真的删除行么', function(index) {
										$.post("../deleteBooks", {
											id : data.id
										}, function(res) {
											layer.msg(res.msg);
											if (res.code == "0") {
												layer.closeAll();
												table.reload("productTable");
											}
										}, "json");
										obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
										layer.close(index);
										//向服务端发送删除指令
									});
								} else if (layEvent === 'edit') { //编辑
									$("#uploadImg").attr("src",
											"../images/" + data.img);
									// 隐藏
									$("#bc").hide();
									$("#id").hide();
									$("#img").hide();
									$("#Test_img").hide();
									// 显示
									$("#updateProd").show();
									// 给form表单赋值
									form.val("mF", data);
									layer.open({
										type : 1,
										content : $('#myDiv'),
										//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
										area : [ '700px', '550px' ]
									});
								}
							});

							// 编辑
							form.on('submit(updateBooks)', function() {
								$.post("../updateBooks", $("#myForm")
										.serialize(), function(res) {
									layer.msg(res.msg);
									if (res.code == "0") {
										layer.closeAll();
										table.reload("productTable");
									}
								}, "json");
								return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
							});
							//监听事件
							table.on('toolbar(test)', function(obj) {
								var checkStatus = table
										.checkStatus(obj.config.id);
								switch (obj.event) {
								case 'add':
									$("#bc").show();
									$("#updateProd").hide();
									$("#id").hide();
									$("#img").hide();
									$("#myForm")[0].reset();
									layer.open({
										type : 1,
										content : $('#myDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
										area : [ '500px', '600px' ]
									});
									break;
								case 'delete':
									layer.msg('删除');
									break;
								case 'update':
									layer.msg('编辑');
									break;
								}
								;
							});
							form.on('submit(bc)', function(data) {
								$.post("../addBooks", $("#myForm").serialize(),
										function(res) {
											if (res.code == "0") {
												layer.msg(res.msg);
												table.reload("productTable");
												layer.closeAll('page');
											} else {
												layer.msg(res.msg);
											}
										}, "json");
								return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
							});

							upload.render({
								elem : '#Test_img' //绑定元素
								,
								url : '../upload?method=uploadImg' //上传接口
								,
								done : function(res) {
									//上传完毕回调
									layer.msg(res.msg);
									$("#uploadImg").attr("src",
											"../images/" + res.data);
									$("#img").val(res.data);
								},
								error : function() {
									//请求异常回调
								}
							});

							// 状态开关
							form.on('switch(xia)', function(data) {
								// 开关是否开启,true或者false
								var checked = data.elem.checked;
								// 获取所需属性值
								var pid = data.elem.attributes['pid'].nodeValue;
								console.log(checked);
								console.log(pid);
								if (checked == false) {
									$.post("../updateCanUses", {
										id : pid,
										canUse : "已下架"
									}, function(res) {
										layer.msg(res.msg);
									}, "json");
								}
							});
							
							// 状态开关
							form.on('switch(shang)', function(data) {
								// 开关是否开启,true或者false
								var checked = data.elem.checked;
								// 获取所需属性值
								var pid = data.elem.attributes['pid'].nodeValue;
								console.log(checked);
								console.log(pid);
								if (checked == false) {
									$.post("../updateCanUses", {
										id : pid,
										canUse : "已上架"
									}, function(res) {
										layer.msg(res.msg);
									}, "json");
								}
							});
						});
	</script>
</body>
</html>